<template>
  <section class="section-container text-white">
    <!-- 背景色 -->
    <img class="bg-box-1" src="~/assets/images/index/bg-new-h-nogrid.webp" alt="" />

    <!-- 网格图片 -->
    <div class="bg-box-2">
      <gridBg></gridBg>
    </div>

    <!-- 内容 -->
    <div class="page-content">
      <h1 class="page-title font-bold">Creativity, <span class="font-semibold">Unleashed. </span></h1>
      <div class="sub-title text-base md:text-2xl">
        Leverage generative AI with a unique suite of tools to convey your ideas to the world.
      </div>

      <div class="get-start-box gap-2 md:gap-14">
        <a href="#" class="get-start-btn px-6 py-4 md:px-14"> Get Started </a>
        <a href="#" class="developer-link-item">
          <span>Developer API</span>
          <arrowRight></arrowRight>
        </a>
      </div>

      <div class="box-4">
        <!-- 左侧悬挂元素 -->

        <!-- 第一个元素 -->
        <!--
          外层元素只用来定位，倾斜使用inner 元素，否则在动画移动的时候，还需要每次都写  transform: rotate(xxxxdeg);
         -->
        <div class="tools-outer tools-box-1 hidden lg:block" ref="toolsBox1">
          <div class="tools-box-inner tools-box-1-inner">
            <img src="~/assets/images/index/Default_Insanity_1.webp" alt="" />
          </div>
        </div>
        <!-- 第二个元素 -->
        <div class="tools-outer tools-box-2 hidden lg:block" ref="toolsBox2">
          <div class="tools-box-inner tools-box-2-inner">
            <video autoplay loop muted src="~/assets/images/index/cat-space-med-1.mp4"></video>
          </div>
        </div>

        <!-- 右侧悬挂元素 -->
        <div class="tools-outer tools-box-3 hidden lg:block" ref="toolsBox3">
          <div class="tools-box-inner tools-box-3-inner">
            <img src="~/assets/images/index/Shoey2-1.webp" alt="" />
          </div>
        </div>
        <div class="tools-outer tools-box-4 hidden lg:block" ref="toolsBox4">
          <div class="tools-box-inner tools-box-4-inner">
            <img src="~/assets/images/index/UniversalUpscaler-1536x1024.webp" alt="" />
          </div>
        </div>

        <div class="big-img hidden md:block">
          <img src="~/assets/images/index/big-img-hero-o.webp" alt="" />
        </div>

        <!-- 移动端显示 -->
        <div class="flex justify-center md:hidden">
          <img class="object-cover" src="~/assets/images/index/leo-home-updated-mob-o.webp" alt="" />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import gridBg from '~/assets/images/svg/grid-bg.vue'
import arrowRight from '~/assets/images/svg/arrow-right.vue'

const { $gsap } = useNuxtApp()

const toolsBox1 = ref()
const toolsBox2 = ref()
const toolsBox3 = ref()
const toolsBox4 = ref()

/**
 * 元素移动
 * @param el 元素
 * @param target 元素到到达这个距离，就不再滚懂
 * @param xMax 在x轴转换的最大值
 * @param yMax 在y轴转换的最大值， 本质是从  初始值 到这个最大值
 */
const elScroll = (el: HTMLElement, target: number, xMax: number, yMax: number) => {
  let top = document.documentElement.scrollTop

  if (!target || target === 0) return

  // 滚动制占 max 这个距离的占比
  if (top < target) {
    let percent = top / target

    let x = xMax * percent
    let y = yMax * percent

    el.style.transform = `translate(${x}%, ${y}%)`
  }
}

const useNativeScroll = () => {
  elScroll(toolsBox1.value, 746, -20, -180)
  elScroll(toolsBox2.value, 1351, 60, -200)
  elScroll(toolsBox3.value, 1383, -60, -200)
  elScroll(toolsBox4.value, 1383, 60, -200)
}

const useGasp = () => {
  // 如果屏幕宽度在 lg 以下的，就不执行js动画
  if (window.innerWidth < 1024) return

  $gsap.to(toolsBox1.value, {
    scrollTrigger: {
      // 我们这里是相对于整个文档的滚动，所以是 document.documentElement， 如果写写成自身，则start就不好写了
      trigger: document.documentElement,

      // 这里要指定为0， 我们要确保运动是从0开始的
      // start: "top center",
      start: '0px',
      end: '746px',
      scrub: true, // 动画会随着滚动条的滚动而进行
      // markers: true,
      onUpdate: (self) => {
        const progress = Math.min(self.progress, 1) // 确保 progress 不超过 1
        $gsap.to(toolsBox1.value, {
          x: `${-20 * progress}%`,
          y: `${-180 * progress}%`,
          overwrite: 'auto'
        })
      }
    },
    duration: 0.5
  })

  $gsap.to(toolsBox2.value, {
    scrollTrigger: {
      trigger: document.documentElement,
      start: '0px',
      end: '1351px',
      scrub: true, // 动画会随着滚动条的滚动而进行
      onUpdate: (self) => {
        const progress = Math.min(self.progress, 1) // 确保 progress 不超过 1
        $gsap.to(toolsBox2.value, {
          x: `${60 * progress}%`,
          y: `${-200 * progress}%`,
          overwrite: 'auto'
        })
      }
    },
    duration: 0.5
  })

  $gsap.to(toolsBox3.value, {
    scrollTrigger: {
      trigger: document.documentElement,
      start: '0px',
      end: '1383px',
      scrub: true, // 动画会随着滚动条的滚动而进行
      // markers: true,
      onUpdate: (self) => {
        const progress = Math.min(self.progress, 1) // 确保 progress 不超过 1
        $gsap.to(toolsBox3.value, {
          x: `${-60 * progress}%`,
          y: `${-200 * progress}%`,
          overwrite: 'auto'
        })
      }
    },
    duration: 0.5
  })

  $gsap.to(toolsBox4.value, {
    scrollTrigger: {
      trigger: document.documentElement,
      start: '0px',
      end: '1383px',
      scrub: true, // 动画会随着滚动条的滚动而进行
      // markers: true,
      onUpdate: (self) => {
        const progress = Math.min(self.progress, 1) // 确保 progress 不超过 1
        $gsap.to(toolsBox4.value, {
          x: `${60 * progress}%`,
          y: `${-200 * progress}%`,
          overwrite: 'auto'
        })
      }
    },
    duration: 0.5
  })
}

const onScroll = () => {
  // 使用原生滚动
  // document.addEventListener("scroll", useNativeScroll);

  useGasp()
}

onMounted(() => {
  // gsap.registerPlugin(ScrollTrigger);
  onScroll()
})

onBeforeUnmount(() => {
  // document.removeEventListener("scroll", useNativeScroll);
})
</script>

<style lang="scss" scoped>
.section-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-content {
  max-width: 1180px;
  padding-top: 100px;
  margin-bottom: 70px;
  padding-left: 20px;
  padding-right: 20px;
}

.bg-box-1 {
  position: absolute;
  z-index: -1;
  display: block;
}

.bg-box-2 {
  height: auto;
  position: absolute;
  min-width: 1600px;
  z-index: -1;
  width: 100%;
}

.page-title {
  text-align: center;
  font-size: clamp(2.125rem, 1.4107rem + 3.5714vw, 3.625rem);
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
}
.sub-title {
  max-width: 625px;
  // font-size: 24px;
  line-height: 30px;
  margin-bottom: 2rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.get-start-box {
  display: flex;
  align-items: center;
  justify-content: center;
  // gap: 55px;

  .get-start-btn {
    width: auto;
    // padding: 12px 55px;
    border-radius: 60px;
    box-shadow:
      0 0 2px rgb(255 255 255 / 0.7) inset,
      0px 0px 15px 0px rgb(0 0 0 / 0%);
    background: linear-gradient(175deg, rgba(255, 255, 255, 0.35) -94.09%, rgba(255, 255, 255, 0) 154.53%);
    backdrop-filter: blur(21px);
    -webkit-backdrop-filter: blur(21px);
    font-size: 14px !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.15s ease-in-out;
  }

  .developer-link-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 400;

    svg {
      width: 14px;
      height: 11px;
    }
  }
}

.box-4 {
  position: relative;
  padding: 21px;
  margin-top: 50px;
  max-width: 1015px;

  .big-img {
    padding: 24px;
    // 增加一个高斯模糊
    backdrop-filter: blur(27px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 3.25%, rgba(255, 255, 255, 0.04) 96.75%);
    border-radius: 38px;
    img {
      border-radius: 38px;
      display: block;
    }
  }
}

// 四周元素
.tools-outer {
  position: absolute;
  z-index: 0;
  // 使用gsap运动物体，就不要写 transition
  // transition: all 0.5s ease;

  .tools-box-inner {
    width: 355px;
    height: 326px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 40px;
    overflow: hidden;
  }

  img {
    display: block;
    border-radius: 40px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  video {
    display: block;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

// 悬浮元素
.tools-box-1 {
  left: -23%;
  top: -30%;

  .tools-box-1-inner {
    // transform: translate(-0.9029%, -8.1262%);
    transform: rotate(15deg);
  }
}

.tools-box-2 {
  top: -16%;
  right: -25%;

  .tools-box-2-inner {
    width: 355px;
    height: 326px;
    transform: rotate(-15deg);
  }
}

.tools-box-3 {
  left: -28%;
  bottom: -13%;

  .tools-box-3-inner {
    transform: rotate(-15deg);
  }
}
.tools-box-4 {
  bottom: -10%;
  right: -25%;

  .tools-box-4-inner {
    transform: rotate(15deg);
  }
}
</style>
